<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 组件的使用 -->
        <test-component :number1="0" :number2="333" :str="name" prop-b="小白" prop-c="小明" :prop-d="55" prop-g="1769873080">
        </test-component>

        <h1>{{name}}</h1>
        <input type="text" v-model="name">
    </div>


</body>
<!-- <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 注册公共组件
    // 格式： Vue.component(组件名, 组件的配置)
    Vue.component('test-component', {
        // props: 是定义当前组件可以传入的参数
        // 在这里定义的值当相当于就是在data中设置了一个数据并且从组件的外部传参进行赋值

        // props的每个设置格式是直接写数组。里面所有设置的值都可是任意数据类型
        // props: ['number1', 'number2'],

        // props可以使用对象的方法进行定义 并且 为不同的参数定义它是什么的数据类型。
        props: {
            number1: Number,
            number2: Number,
            str: String,
            // 多个可能的类型
            propB: [String, Number],
            // 必填的字符串
            propC: {
                type: String,
                required: true
            },
            // 带有默认值的数字
            propD: {
                type: Number,
                default: 100
            },
            // 带有默认值的对象
            propE: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return { message: 'hello' }
                }
            },
            propF: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return [1, 2, 3]
                }
            },
            // 自定义验证函数
            // 思考，这里可不可以写一个验证为手机号的方法呢？（练习）
            propG: {
                // 这里方法的参数就是prop传来的值。是不否报错是由该函数返回的是否为true来决定
                validator: function (value) {
                    let reg = /^1(3|4|5|7|8)\d{9}$/;
                  
                    // 这个值必须匹配下列字符串中的一个
                    // return ['success', 'warning', 'danger'].indexOf(value) !== -1
                    return   reg.test(value) 

                }
            }
        },
        // 当前组件默认的数据
        data: function () {
            return {
                // num1: 1,
                // num2: 23
            }
        },
        // template:是当前组件的模板
        template: `
        <div>
            <h1>{{number1 + number2 + propD}}</h1>
            <p>{{str}}</p>
            <p>{{propB}}</p>
            <p><input style="color:red;" type="text" v-model="str"></p>
        </div>
        `
    })



    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            name: '小明'
        },
        // 使用生命周期
        beforeCreate: function () {

        },
        mounted: function () {
            let a = Symbol()
            let b = Symbol()
            console.log(a, 111)

            obj = { name: 'ALex', age: 123 }
            obj[a] = '22222'
            obj[b] = '3333'
            console.log(obj, obj[a])
        },

        // methods是当前应用定义的函数方法
        methods: {

        },
    })



</script>

</html>